{extend name="apps/common/view/front.tpl" /}
<!-- -->
{block name="header_meta"}
<title>MarkDown编辑器演示－{:config('common.site_name')}</title>
<meta name="keywords" content="markdown" />
<meta name="description" content="呆错后台管理框架使用MarkDown编辑器作为框架默认编辑器的演示，因为体积小巧、功能强大。"  />
{/block}
{block name="header"}{include file="apps/common/view/widget/header.tpl" /}{/block}
<!--main -->
{block name="main"}
<div class="container pt-5">
  <h2 class="text-center mb-3">MarkDown编辑器演示</h2>
  <p class="lead text-center text-muted">呆错后台管理框架使用MarkDown编辑器作为框架默认编辑器的演示，因为体积小巧、功能强大。</p>
  {:DcBuildForm([
    'class'    => 'bg-white',
    'action'   => DcUrl('markdown/index/index'),
    'method'   => 'post',
    'ajax'     => true,
    'submit'   => lang('submit'),
    'reset'    => lang('reset'),
    'close'    => false,
    'disabled' => false,
    'callback' => false,
    'data'     => false,
    'items'    => [
        [
            'type'        => 'editor',
            'name'        => 'dc_editor',
            'id'          => 'dc_editor',
            'placeholder' => 'editor',
            'value'       => '呆错（DaiCuo）是一款基于ThinkPHP、Bootstrap、Jquery的自适应后台管理框架！',
            'rows'        => 12,
            'class'       => 'row form-group',
            'class_right' => 'col-12',
        ],
    ]
  ])}
  <h6 class="mt-5">MarkDown代码服务端解析（PHP）</h6>
  <p id="parsePhp">{:DcEditor('**呆错（DaiCuo）**是一款基于ThinkPHP、Bootstrap、Jquery的极速后台开发框架')}</p>
  <h6 class="mt-5">MarkDown代码客户端解析（Javascript）</h6>
  <p id="parseJs">……</p>
</div>
{/block}
<!-- -->
{block name="js"}
<script>
$(document).ready(function () {
    window.daicuo.ajax.init();
    window.daicuo.ajax.script(daicuo.config.root+'apps/markdown/static/hyperdown.min.js',function(){
        var parser = new HyperDown();
        var html = parser.makeHtml('**呆错（DaiCuo）**是一款基于ThinkPHP、Bootstrap、Jquery的极速后台开发框架');
        $('#parseJs').html(html);
    });
});
</script>
{/block}
{block name="footer"}{include file="apps/common/view/widget/footer.tpl" /}{/block}